/**
 * css-in-js 是将 CSS 代码 跟 JS 代码 混合在一起，通过 JS 来动态的生成 CSS 样式，
 * 但是这样的话与我们的认知是背道而驰的，正常应该是 CSS JS HTML 分离的，但是由于 CSS 缺乏作用域，
 * 所以形成了 css-in-js 这种写法，注意 css-in-js 并不是一种技术，而是一种思想。
 *
 * 优点：
可以让 CSS 拥有独立的作用域，阻止 CSS 泄露到组件外部，防止冲突。
可以动态的生成 CSS 样式，根据组件的状态来动态的生成 CSS 样式。
CSS-in-JS 可以方便地实现主题切换功能，只需更改主题变量即可改变整个应用的样式。
缺点：
css-in-js 是基于运行时，所以会损耗一些性能(电脑性能高可以忽略)
调试困难，CSS-in-JS 的样式难以调试，因为它们是动态生成的，而不是在 CSS 文件中定义的。

原理:
这个技术叫标签模板， 是ES6 新增的特性，它可以紧跟在函数后面，该函数将被用来调用这个字符串模板
 */
import { ButtonDemo } from "./button";
import { ButtonDemo2 } from "./button2";
import InputDemo from "./input/index";
export default function CssInJsDemo() {
  return (
    <div>
      <div>css in js</div>
      <ButtonDemo></ButtonDemo>
      <ButtonDemo2></ButtonDemo2>
      <InputDemo></InputDemo>
    </div>
  );
}
